<!DOCTYPE html>
<html class="" lang="en">
<head>
	<title>Hitech</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">	
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">				
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
  		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css"> 
  		<link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
		<link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="/css/public.css" media="all">


</head>
<body>
<th:block th:include="header"/>
	<div id="checkout_page" class="checkout-page animate__animated animate__fadeInUp">


		<div class="sp_header bg-white p-3 ">
			<div class="container custom_container ">	
				<div class="row ">
					<div class="col-12 ">
						<ul>
							<li class="d-inline-block font-weight-bolder"><a href="index.html">首页</a></li>
							<li class="d-inline-block hr_ font-weight-bolder"><a href="#">确认订单</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="container custom_container">
			<div class="row">
				<div class="col-lg-8 col-12">

					<div class="accordion" id="check_out_toggle">
					  <div class="card rounded mb-2">
					    <div class="card-header bg-white" id="checkout_info">
					      <h2 class="mb-0">
					        <button class="btn btn-link btn-block text-left text-body p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#check_info" aria-expanded="true" aria-controls="check_info">
					         商品信息<span class="float-right"><i class="fas fa-angle-down"></i></span>
					        </button>
					      </h2>
					    </div>

					    <div id="check_info" class="collapse show" aria-labelledby="checkout_info" data-parent="#check_out_toggle">
					      <div class="card-body">

							<div class="tab-content" >
							  <div class="tab-pane fade show active" id="order_guest"  aria-labelledby="order_guest">
							  	
							  	<div id="Registration" class="page-content mt-4 mb-0">
									<!--就这-->
					            	<form th:each="CheckOutWaresInfo:${CheckOutWaresInfo}" class="needs-validation " method="post" novalidate>
										<input type="hidden" th:text+="${CheckOutWaresInfo.amount*CheckOutWaresInfo.amount}" class="mySumPrice">
										<div class="row">
											<div class="col-12 col-md-6 pr-0">
												<div class="d-flex">
													<div class=" col-xl-4 col-lg-5 col-md-4 col-4 px-0">
														<a><img th:src="${CheckOutWaresInfo.mainPic}" class="fst-image mx-auto d-block img-fluid"
																alt="product_13"></a>
													</div>
													<div class=" col-xl-8 col-lg-7 col-md-8 col-8 pr-0">
														<h4 class="product-name font-weight-bold mb-2 mb-sm-3 mb-xl-3 mt-sm-2 mt-md-2"><a
																href="#" th:text="${CheckOutWaresInfo.WaresName}"></a></h4>
														<div><span class="font-weight-bolder price" th:text="${CheckOutWaresInfo.price}"></span>RMB
															<del class="text-muted" th:text="${CheckOutWaresInfo.prePrice}"></del>
														</div>
														<div class="my-1 f_13">
															<span th:text="${CheckOutWaresInfo.memberWaresColor}">颜色:</span>
															<span></span>
														</div>
														<div class="f_13">
															<span  th:text="${CheckOutWaresInfo.memberWaresVersion}">版本:</span>
															<span></span>
														</div>
														<div class="f_13">
															<span th:text="${CheckOutWaresInfo.feature}">特色:</span>
															<span></span>
														</div>
													</div>
												</div>
											</div>

											<div class="col-12 col-md-6 mt-4">
												<div class="d-flex">
													<div class="col-md-3 col-sm-4 col-5 text-left text-md-right my-2 ">
														<!--小计-->
														<span class="subTotal" th:text="${CheckOutWaresInfo.amount*CheckOutWaresInfo.price}"></span>
													</div>


													<div class="col-md-7 col-sm-4 col-5">
														<input type="number"  class="form-control input-number"   th:value="${CheckOutWaresInfo.amount}" disabled>
													</div>

												</div>
											</div>
										</div>
										<hr>

									</form>
					            </div>
							  </div>
							</div>

					      </div>
					    </div>
					  </div> <!-- card -->
					  <div class="card rounded mb-2">
					    <div class="card-header bg-white" id="chechout_add">
					      <h2 class="mb-0">
					        <button class="btn btn-link btn-block text-left collapsed text-body p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#check_add" aria-expanded="false" aria-controls="check_add">
					          地址<span class="float-right"><i class="fas fa-angle-down"></i></span>
					        </button>
					      </h2>
					    </div>
					    <div id="check_add" class="collapse" aria-labelledby="chechout_add" data-parent="#check_out_toggle">
					      <div class="card-body">
					        
					      		<div id="c_address" class="page-content">
					            	<form class="needs-validation " method="post" novalidate>

										<input type="text" placeholder="您可以选择在这里添加备注以供商家能更好的了解您的需求" class="form-control" id="remark">
										<br>
									  <div class="form-group" th:each="address:${address}" style="display: flex; align-items:center;">
				      					<input type="text" class="form-control"  disabled th:value="${address.province+address.city+address.area+address.address}" style="width: 500px" >
										<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-left: 10px;">选择</button>
										<input type="hidden" th:value="${address.id}">
									  </div>
										<input type="hidden" id="currentAddress">

									</form>
					            </div>
					      </div>
					    </div>
					  </div> <!-- card -->
					  <div class="card rounded mb-2">
					    <div class="card-header bg-white" id="checkout_shipping">
					      <h2 class="mb-0">
					        <button class="btn btn-link btn-block text-left collapsed text-body p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#check_ship" aria-expanded="false" aria-controls="check_ship">
					          送货方式<span class="float-right"><i class="fas fa-angle-down"></i></span>
					        </button>
					      </h2>
					    </div>
					    <div id="check_ship" class="collapse" aria-labelledby="checkout_shipping" data-parent="#check_out_toggle">
					      <div class="card-body">
					        
					      	<div id="ship_check" class="page-content">
					            	<form>

					            	  <div class="form-group text-left">
				                        <label class="font-weight-bold">支持快递</label><br>
				                            <span class="form-check d-inline-block">
									          <input class="form-check-input" type="radio" name="gridRadios" id="free_ship" checked>
									          <label class="form-check-label" for="free_ship">
									            顺丰/京东
									          </label>
									        </span>
				                         </div>
				                     </form>
				                 </div>

					      </div>
					    </div>
					  </div> <!-- card -->
					  <div class="card rounded mb-2">
					    <div class="card-header bg-white" id="checkout_payment">
					      <h2 class="mb-0">
					        <button class="btn btn-link btn-block text-left collapsed text-body p-0 font-weight-bold" type="button" data-toggle="collapse" data-target="#check_payment" aria-expanded="false" aria-controls="check_payment">
					          支付方式<span class="float-right"><i class="fas fa-angle-down"></i></span>
					        </button>
					      </h2>
					    </div>
					    <div id="check_payment" class="collapse" aria-labelledby="checkout_payment" data-parent="#check_out_toggle">
					      <div class="card-body">
					        
					      	<div id="pay_check" class="page-content">
					            	<form >
					            	  <div class="form-group text-left">
				                        <label class="font-weight-bold">请选择</label><br>
				                            <span class="form-check d-inline-block">
									          <input class="form-check-input" type="radio" name="gridRadios" id="pay_by_check" checked>
									          <label class="form-check-label" for="pay_by_check">
									            支付宝
									          </label>
									        </span>

				                         </div>
										  <div class="text-center">
											  <button type="button" class="btn btn-primary f_13" id="submitBill">
						                       提交订单
						                      </button>
						                  </div>
				                     </form>
				                 </div>

					      </div>
					    </div>
					  </div> <!-- card -->
					</div>

				</div>
				<div class="col-lg-4 col-12 ">
					<div class="border rounded bg-white final_payment">
						<div class="card-body  border-bottom">
							<p class="font-weight-bolder">详情展示</p>
							<div>
								<span class="font-weight-bold">商品个数</span>
								<span class="float-right font-weight-bold" id="waresAmount"></span>
							</div>
							<div>
								<span class="font-weight-bold">商品总价</span>
								<span class="float-right font-weight-bold" id="sumPrice"></span>
							</div>
						</div>
						<div class="card-body  border-bottom">
							<div>
								<span class="font-weight-bold">优惠</span>
								<span class="float-right font-weight-bold" id="breaks"></span>
							</div>
							<div>
								<span class="font-weight-bold">运费</span>
								<span class="float-right font-weight-bold">9.00</span>
							</div>
							<div>
								<span class="font-weight-bold">订单状态</span>
								<span class="float-right font-weight-bold">待提交</span>
							</div>
						</div>
						<div class="card-body ">
							<span class="font-weight-bold">应付总额</span>
							<span class="float-right font-weight-bold" id="endSumPrice"></span>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

<th:block th:include="end"/>

	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/moment.min.js"></script>
    <script src="/js/daterangepicker.min.js"></script>
    <script src="/js/wow.min.js"></script>

    <script>
        // Disable form submissions if there are invalid fields
        (function() {
          'use strict';
          window.addEventListener('load', function() {
            // Get the forms we want to add validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
              form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          }, false);
        })();
        </script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
	layui.use([ 'form', 'table', 'layer'], function() {
		var $ = layui.jquery, form = layui.form, table = layui.table;
		layer = layui.layer;

		var ids='[[${ids}]]';

		//给地址-选择按钮绑定事件
		$(".layui-btn").click(function() {
			$(".form-control").css("border", "none");
			$(this).prev().css("border", "1px solid red");
			$("#currentAddress").val($(this).next().val());
		});

		//商品总价
		var sumPrice=0;
		var sumPrePrice=0;
		var sumAmount=0;
		//查询订单中商品的信息
		$.post("/checkout/checkoutWaresInfo?ids="+ids,function (checkoutWaresInfo){
			$.each(checkoutWaresInfo,function (i,v){
				sumPrice+=v.amount*v.price;//总现价
				sumPrePrice+=v.amount*v.prePrice;//总原价
				sumAmount+=v.amount;
			});
			//商品个数
			$("#waresAmount").html(sumAmount);
			//商品总价
			$("#sumPrice").html(sumPrePrice);
			//应付金额
			$("#endSumPrice").html(sumPrice+9);
			//优惠力度
			$("#breaks").html(sumPrePrice-sumPrice);
		});



     //给提交订单按钮绑定事件
		$("#submitBill").on("click",function(){
			if ($("#currentAddress").val().length==0){
				layer.msg("请选择收货地址!");
			}else{
				$.post("/bill/saveBill?ids="+ids+"&&memberAddressId="+$("#currentAddress").val()+"&&remark="+$("#remark").val(),function (res){
					window.location.href="/billSuccess/billSuccessPage?billCode="+res.code+"&&qrcode="+res.qrcode;
				});
			}

		});







	});
</script>
</body>
</html>